<!DOCTYPE HTML>
<html>
<head>
	<meta name="format-detection" content="telephone = no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta charset = "utf-8"/>
	<meta name="viewport" content="user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width">

	<link rel="stylesheet" href="css/view.css">
	<link rel="stylesheet" href="css/index.css">

	<title>view-parameter</title>
</head>
<body>
	<section data-view-id="page1" data-view="true">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			视图1
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<div class = "body">
			<div class = "code">
View.navTo("page2", {
  params: {
    param1: 1,
    param2: "2",
    param3: true,
    param4: document.body,
    param5: function(){alert('hello, world!')}
  }
});
			</div>
			<div class = "btn">带参数进入视图2</div>
		</div>
	</section>
	<section data-view-id="page2" data-view="true" data-view-directly-accessible = "true">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			视图2
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<div class = "body">
			<h1>本视图可以直接访问，但刷新后参数将丢失</h1>
			<div class = "output"></div>
		</div>
	</section>

	<script type = "text/javascript" src = "js/plugin/view.min.js"></script>
	<script type = "text/javascript">
	var btnObj = View.find(".btn");
	
	btnObj.addEventListener("click", function(){
		View.navTo("page2", {
			params: {
				param1: 1,
				param2: "2",
				param3: true,
				param4: document.body,
				param5: function(){alert('hello, world!')}
			}
		});
	});
	
	var page2 = View.ofId("page2");
	page2.on("enter", function(){
		var outputObj = page2.find(".output");

		var param5 = page2.getParameter("param5");
		var params = page2.getParameter();
		
		var str = "";
		for(var paramName in params)
			str += "<br/>收到入参：" + paramName + " = " + params[paramName] + "，类型：" + typeof (params[paramName]);
		outputObj.innerHTML = "" === str? "没有收到任何入参": str;
		
		setTimeout(function(){
			param5();
		}, 0);
	});
	</script>
</body>
</html>